jquery设置li标签居中 |
您所在的位置：网站首页 › html ul标签 › jquery设置li标签居中 |
|
在使用 jQuery 对网页进行布局和设计时，有时我们需要将一个列表元素（li 标签）居中。下面将介绍如何使用 jQuery 将一个 标签下的 标签居中。 方法一：使用 flex 布局实现居中 Flex 布局是 CSS3 新增的一种布局方式，它可以快速的实现居中。 首先在 CSS 中设置 标签的样式： ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }登录后复制display: flex;：将 标签设置为 flex 布局。flex-wrap: wrap;：当 标签的数量超过一行时，自动换行。justify-content: center;：水平方向居中align-items: center;：垂直方向居中此时， 下的 元素会自动居中。 方法二：使用 jQuery 计算偏移量居中 在某些情况下，我们可能无法使用 flex 布局，此时可以使用 jQuery 来计算偏移量从而将 居中。 首先，需要给 和 标签设置以下 CSS 样式： ul { position: relative; } li { position: absolute; left: 50%; transform: translateX(-50%); }登录后复制position: relative;：为 标签设置 position 属性，为后续设置绝对定位做准备。position: absolute;：为 标签设置 position 属性，使其绝对定位，此时可以根据父元素（）的坐标进行偏移。left: 50%;：使 元素相对于 元素居中。transform: translateX(-50%);：由于 left: 50% 让 元素的左侧与 元素的中心对齐，此时使用 transform 属性将 元素向左偏移 50% 即可完全居中。现在，使用一段 jQuery 代码计算每个 标签需要的偏移量： $(window).on('load resize',function(){ var parentWidth = $('ul').width(); // 父元素宽度 $('li').each(function(){ var childWidth = $(this).outerWidth(); // 子元素宽度 var leftOffset = (parentWidth - childWidth) / 2; // 计算偏移量 $(this).css('left', leftOffset + 'px'); // 设置偏移量 }); });登录后复制$(window).on('load resize',function(){});：监听页面 load 和 resize 事件，这样可以在任何时候动态改变屏幕大小时都能保证 元素居中。var parentWidth = $('ul').width();：取得父元素（）的宽度。var childWidth = $(this).outerWidth();：获取每个 元素的宽度。var leftOffset = (parentWidth - childWidth) / 2;：根据父元素宽度和 元素宽度计算出需要的偏移量。$(this).css('left', leftOffset + 'px');：将计算出来的偏移量应用到每个 元素的 left 属性中。结语 以上是两种将 标签居中的实现方法，其中 flex 布局简单快速，且不需要使用 JavaScript，但兼容性较低。而使用 jQuery 计算偏移量的方法适用范围较广，但需要较多的代码和计算，不过是一种用 jQuery 方式实现居中的优秀范例。 以上就是jquery设置li标签居中的详细内容，更多请关注php中文网其它相关文章！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |